<template>
	<view class="launch-animation flex--col" role="region" aria-label="欢迎使用何远不到,这是一款盲人旅游陪伴服务小程序">
		<view class="launch-animation-window" aria-label="正在加载资源,请稍后">
			<view class="animation-spots flex--row">
				<image src="@/static/index/spot1.svg" class="animation-spot"></image>
				<image src="@/static/index/spot2.svg" class="animation-spot"></image>
				<image src="@/static/index/spot3.svg" class="animation-spot"></image>
				<image src="@/static/index/spot4.svg" class="animation-spot"></image>
				<image src="@/static/index/spot5.svg" class="animation-spot"></image>
				<image src="@/static/index/spot6.svg" class="animation-spot"></image>
				
				<image src="@/static/index/spot1.svg" class="animation-spot"></image>
			</view>
			<view src="@/static/index/selfie.svg" class="animation-selfie"></view>
			<view class="animation-sun"></view>
		</view>
		<view class="launch-animation-logo" aria-label="何远不到">
			<image src="@/static/index/logo.png" class="image-max-width"></image>
		</view>
	</view>
</template>

<script>
</script>

<style lang="scss" scoped>
	.launch-animation{
		width:600rpx;
		margin:auto;
		height:100vh;
		color:#fff; 
		font-weight:700;
		align-items:center;
		justify-content: center;
		
		
		
		&-window{
			height:300px;
			width:96px;
			padding:24px;
			border: 2px solid #383838;
			border-radius: 10px;
			position:relative;
			overflow:hidden;
			animation:popFromBottom 1s cubic-bezier(0.94, 0.30, 0.23, 0.93);
			animation-delay: 0.3s;
			.animation-spots{
				animation: move 6s linear infinite;
			}
			
			.animation-spot{
				flex-shrink:0;
				width:256px;
				height:256px;
			}
			
			.animation-selfie,.animation-sun{
				position:absolute;
				background-size: cover;
				
			}
			
			.animation-selfie{
				background-image: url("../../static/index/selfie.png");
				height: 120px;
				width: 120px;
				left:0%;
				bottom:0%;
				animation: selfie 3s steps(6,end) infinite alternate;
			}
			.animation-sun{
				background-image: url("../../static/index/sun.png");
				height: 60px;
				width: 60px;
				right:0%;
				top:0%;
				animation: sunshine 1s steps(4,end) infinite alternate;
			}
		}
		
		&-logo{
			width:100%;
			image{
				height:200rpx;
			}
			animation:moveFromBottom 1.2s cubic-bezier(0.94, 0.30, 0.23, 0.93);
		}
	}
	
	@keyframes move{
		0%{
			transform:translateX(0px);
		}
		
		100%{
			transform:translateX(-1536px);
		}
	}
	
	@keyframes popFromBottom{
		0%{
			transform:translateY(0px);
		}
		
		90%{
			transform: translateY(-12px);
		}
		
		100%{
			transform:translateY(0px)
		}
	}
	
	@keyframes moveFromBottom{
		0% {
			transform: translateY(64px) scale(0.8);
			opacity: 0;
		}
		
		70%{
			transform:translateY(-36px);
		}
		
		100%{
			transform:translateY(0px) scale(1);
			opacity: 1;
		}
	}
		
	@keyframes sunshine{
		0% {
		        background-position: 0 0;
		    }
			
		100% {
				background-position: -400% 0;
			}
	}
	
	@keyframes selfie{
		0% {
		        background-position: 0 0;
		    }
			
		100% {
				background-position: -600% 0;
			}
	}
	
</style>